<template>
    <div class="Right01-box">
        
        <section>
                <router-link to="../Classify03">
            <h1>全面提升
            </h1>
             
            <div class="Right01-box02">
                <div class="Right01-box01">情景学习</div>
            <div class="Right01-box01">听说读写</div>
            </div>
               </router-link>
        </section>
         <section>
             <router-link to="../Classify03">
              <h1>口语训练
            </h1>
            <div class="Right01-box03">实用口语训练</div>
            </router-link>
        </section>
         <section>
              <router-link to="../Classify03">
              <h1>趣听英语
            </h1>
            <div class="Right01-box03">实用趣听英语</div>
            </router-link>
        </section>
         <section>
             <router-link to="../Classify03">
              <h1>小语种
            </h1>
            <div class="Right01-box02">
            <div class="Right01-box01">日语</div>
            <div class="Right01-box01">韩语</div>
            <div class="Right01-box01">西班牙语</div>
            </div>
            </router-link>
        </section>
    </div>
        
</template>

<script>



export default {
    name:"Right01",
   
    
   
}
</script>

<style scoped>
.Right01-box{
    width: 100%;
    height: 100%;
    margin-left: .1rem;
}
section{
    margin-top: 0.2rem;
}
.Right01-box02{
    display: flex;
}
.Right01-box01{
    font-size: .12rem;
    width: .5rem;
    height: 0.3rem;
    border: .01rem solid rgb(150, 149, 149);
    border-radius: 20%;
    text-align: center;
    line-height: 0.3rem;
    margin-left: .08rem;
    margin-top: .2rem;
}

.Right01-box03{
    font-size: .12rem;
    width: 0.9rem;
    height: 0.3rem;
    border: .01rem solid rgb(150, 149, 149);
    border-radius: 20%;
    text-align: center;
   line-height: 0.3rem;
    margin-left: .08rem;
     margin-top: .2rem;
}

a{
    text-decoration: none;
    color: black;
}
</style>
